.euiDataGrid {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  height: 100%;
}

.euiDataGrid--fullScreen {
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: $euiZModal;
  background: $euiColorEmptyShade;

  .euiDataGrid__pagination {
    padding-bottom: $euiSizeXS;
    background: $euiColorLightestShade;
    border-top: $euiBorderThin;
  }

  .euiDataGrid__verticalScroll .euiDataGridRow {
    will-change: transform;
  }
}

.euiDataGrid__content {
  @include euiScrollBar;

  height: 100%;
  overflow: auto;
  font-feature-settings: 'tnum' 1; // Tabular numbers
  scroll-padding: 0;
  max-width: 100%;
  width: 100%;
  z-index: 2; // Sits above the pagination below it, but below the controls above it
}

.euiDataGrid__controls {
  background: $euiPageBackgroundColor;
  position: relative;
  z-index: 3; // Needs to sit above the content blow that sits below it
  border: $euiBorderThin;
  padding: $euiSizeXS;
  flex-grow: 0;

  > * {
    margin-left: $euiSizeXS / 2;
  }
}

.euiDataGrid__controlBtn {
  border-radius: $euiBorderRadius;

  &:focus {
    background: shadeOrTint($euiColorLightestShade, 10%, 10%);
  }
}

.euiDataGrid__controlBtn--active,
.euiDataGrid__controlBtn--active:focus {
  font-weight: $euiFontWeightSemiBold;
  color: $euiColorFullShade;
}

@include euiDataGridStyles(bordersNone) {
  .euiDataGrid__controls {
    border: none;
    background: $euiColorEmptyShade;
  }
}

@include euiDataGridStyles(bordersHorizontal) {
  .euiDataGrid__controls {
    border-right: none;
    border-left: none;
    border-top: none;
    background: $euiColorEmptyShade;
  }
}

.euiDataGrid__pagination {

  padding-top: $euiSizeXS;
  flex-grow: 0;
}

.euiDataGrid__verticalScroll {
  flex-grow: 1;
  overflow-y: hidden;
  height: 100%;
}

.euiDataGrid__overflow {
  overflow-y: hidden;
  height: 100%;
  background: $euiColorEmptyShade;
}

// This is used to remove extra scrollbars on the body when fullscreen is enabled
.euiDataGrid__restrictBody {
  height: 100vh;
  overflow: hidden;
}


.euiDataGrid__controlScroll {
  @include euiYScrollWithShadows;
  max-height: $euiDataGridPopoverMaxHeight;
  padding: $euiSizeS;
  margin: -$euiSizeS; // Offset against the panel to make the scrollbar flush scrollbars
}

.euiDataGrid__focusWrap {
  height: 100%;
}
